<template>
	<div class="goodsinfo-container">

		<!-- transition 动画标签 -->
		<transition
			@before-enter='beforeEnter'
			@enter='enter'
			@after-enter='afterEnter'>
			<!-- 小球盒子 -->
			<div class="ball" v-show='ballFlag' ref='ball'></div>
		</transition>


		<!-- 商品轮播图区域 -->
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<swiper :lunbotuList='lunbotu' :isfull='false'></swiper>
				</div>
			</div>
		</div>


		<!-- 商品购买区域 -->
		<div class="mui-card">
			<div class="mui-card-header">{{ goodsinfo.title }}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="price">
						市场价：<del>￥{{ goodsinfo.market_price }}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{ goodsinfo.sell_price}}</span>	
					</p>
					<p>购买数量：<numbox @getcount='getSelectedCount' :max='goodsinfo.stock_quantity'></numbox></p>
					<p>
						<mt-button type='primary' size='small'>立即购买</mt-button>
						<mt-button type='danger' size='small'
						 @click='addToShopCar'>加入购物车</mt-button>		
						<!-- 分析：如何实现点击加入购物车的时候拿到选择的数量 -->
						<!-- 1.经过分析发现：按钮属于 goodsinfo 页面，数字是属于numberbox组件 -->
						<!-- 2.由于涉及到了父子组件的嵌套，所以无法直接在 goodsinfo 页面中获取到选中的商品数量值 -->
						<!-- 3.怎么解决这个问题：涉及到了子组件向父组件传值(时间调用机制) -->
						<!-- 4.事件调用的本质：父向子传递方法，子调用这个方法，同时把数据当做参数传递给父组件 -->
					</p>
				</div>
			</div>
		</div>


		<!-- 商品参数区域 -->
		<div class="mui-card">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>商品货号：{{ goodsinfo.goods_no }}</p>
					<p>库存情况：{{ goodsinfo.stock_quantity }}件</p>
					<p>上架时间：{{ goodsinfo.add_time | dateFormat}}</p>
				</div>
			</div>
			<div class="mui-card-footer">
				<mt-button type='primary' size='large' @click='goDesc(id)'>图文介绍</mt-button>
				<mt-button type='danger' size='large' @click='goComment(id)'>商品评论</mt-button>
			</div>
		</div>

	</div>
</template>
	
<script>
	// 导入自写的公用轮播图组件
	import swiper from '../subcomponents/swiper.vue'
	// 导入自写的公用 数字选择框 组件
	import numbox from '../subcomponents/goodsinfo_numbox.vue'


	export default {
		data() {
			return {
				// 获取 URL 地址中的Id
				id: this.$route.params.id,
				lunbotu: [], // 存放商品的轮播图信息
				goodsinfo: {}, // 存放商品的信息
				ballFlag: false, // 控制小球的隐藏和显示的标识符
				selectedCount: 1 // 保存用户选中的商品数量，默认为1件
			}
		},
		created() {
			this.getLunbotuInfo();
			this.getGoodsInfo();
		},
		methods: {
			getLunbotuInfo() {
				// 获取商品的轮播图信息
				this.$http.get('api/getthumimages/' + this.id).then(result => {
					if(result.body.status === 0) {
						// 先循环轮播图数组中的每一项，并且为每项添加 img 属性，因为我们自写的公用轮播图组件中只能循环 item.img 属性，不会循环其他属性，例如我们获取的图片信息是 item.src
						result.body.message.forEach(item => {
							item.img = item.src;
						})
						this.lunbotu = result.body.message;
					}
				})
			},
			getGoodsInfo() {
				// 获取商品的信息
				this.$http.get('api/goods/getinfo/' + this.id).then(result => {
					if(result.body.status === 0) {
						this.goodsinfo = result.body.message[0];
					}
				})
			},
			goDesc(id) {
				// 点击使用编程式导航跳转到 图文介绍页面
				this.$router.push({name:'goodsdesc', params:{id} })
			},
			goComment(id) {
				// 点击使用编程式导航跳转到 商品评论页面
				this.$router.push({name:'goodscomment', params:{id} })
			},
			addToShopCar() {
				// 添加到购物车
				this.ballFlag = !this.ballFlag;

				// {id:商品的id, count:要购买的数量, price:商品的单价, selected:false}
				// 当点击'加入购物车时'，拼接处一个要保存到 store 中 car 数组里面的商品信息对象
				var goodsinfo = {
					id: this.id,
					count: this.selectedCount,
					price: this.goodsinfo.sell_price,
					selected: true
				}
				// 调用 store 中的 mutations 方法将对应的商品信息加入购物车
				this.$store.commit('addTocar', goodsinfo);
			},
			beforeEnter(el) {
				el.style.transform = 'translate(0, 0)';
			},
			enter(el, done) {

				// 小球动画优化思路
				// 1.先分析导致动画不准确的本质原因：我们把小球最终位移到的位置已经局限在了某一分辨率下的滚动条未滚动的情况下
				// 2.只要分辨率和测试的时候不一样 或者 滚动条有一定的滚动距离之后，小球动画的问题就出现了
				// 3.因此，我们经过分析得到结论：不能把小球的最终横纵坐标位置写死了，而是应该根据不同情况，动态计算这个坐标值
				// 4.经过分析得出截图思路：先得 购物车徽标的横纵坐标，在得到小球的横纵坐标，然后让 y值求差 x值也求差，得到的结果就是小球横纵坐标需要位移的准去距离
				// 5.如果获取徽标和小球的位置？ 可以使用 domObject.getBoundingClientRect() 这个JS方法
				// 注：domObject.getBoundingClientRect() 可以获取元素到页面的距离，不包含滚动的距离，里面有 left top right bottom这四个值


				// 获取小球在页面中的位置
				const ballPosition = this.$refs.ball.getBoundingClientRect();
				// 获取徽标在页面中的位置 这里直接使用了DOM元素，特殊情况，Vue中偶尔用一下也无关大雅
				const badgePostion = document.getElementById('badge').getBoundingClientRect();

				const xDist = badgePostion.left - ballPosition.left;
				const yDist = badgePostion.top - ballPosition.top;


				el.offsetWidth;
				el.style.transform = `translate(${xDist}px, ${yDist}px)`;
				// cubic-bezier(.4,-0.3,1,.68 这是动画运动的一种效果而已
				el.style.transition = 'all 1.5s cubic-bezier(.4,-0.3,1,.68)';
				done();
			},
			afterEnter(el) {
				this.ballFlag = !this.ballFlag;
			},
			getSelectedCount(count) {
				// 当子组件把选中的数量传递给父组件的时候，父组件把选中的数值保存到data上
				this.selectedCount = count;
				console.log('父组件拿到的数值为：' + this.selectedCount);
			}
		},
		components: {
			swiper, // 把轮播组件添加为自己的子组件
			numbox // 把数字选择框组件添加为自己的子组件
		}
	}
</script>

<style lang='scss' scoped>
	.goodsinfo-container {
		background-color: #eee;
		overflow: hidden;

		.now_price {
			color: red;
			font-size: 16px;
			font-weight: bold;
		}

		.mui-card-footer {
			display: block;

			button {
				margin: 15px 0;
			}
		}


		.ball {
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background-color: red;
			position: absolute;
			top: 390px;
			left: 146px;
			z-index: 99;
		}
	}
</style>